/**
 * @description vite自定义插件 - 页面刷新后的过渡动画效果
 * @author 叶花弈
 * @lastModify 2024-08-07
 */

export default (options = { system: "TGG-Vite-Admin" }) => {
  const { system } = options;
  return {
    name: "vite-plugin-pageLoad",
    transform(code, id) {
      // 往main.js里面注入JS代码
      if (id.endsWith("main.js")) {
        const script = `
          const cssText = "/* 蒙层 */ .block-loading { width: 100vw; height: 100vh; position: fixed; z-index: 9990; background-color: var(--el-bg-color-page); } /* Loading具体样式动画 */ .block-loading .block-loading-box { display: flex; flex-direction: column; align-items: center; font-size: 16px; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .block-loading .block-loading-box-warp { width: 80px; height: 80px; margin-bottom: 10px; } .block-loading .block-loading-box-warp .block-loading-box-item { width: 33.333333%; height: 33.333333%; background: #409eff; float: left; animation: block-loading-animation 1.2s infinite ease; border-radius: 1px; } .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) { animation-delay: 0s; } .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) { animation-delay: 0.1s; } .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) { animation-delay: 0.2s; } .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) { animation-delay: 0.3s; } .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) { animation-delay: 0.4s; } @keyframes block-loading-animation { 0%, 70%, 100% { transform: scale3D(1, 1, 1); } 35% { transform: scale3D(0, 0, 1); } }"
          const styleElement = document.createElement('style');
          styleElement.appendChild(document.createTextNode(cssText));
          document.head.appendChild(styleElement);
          // 开始加载
          const startLoad = () => {
            // 1. 获取页面body元素
            const bodyDom = document.body;
            // 2. 创建页面loading元素, 插入至body中
            const pageLoadDom = document.createElement("div");
            pageLoadDom.className = "block-loading";
            pageLoadDom.innerHTML = "<div class='block-loading-box'><div class='block-loading-box-warp'><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div><div class='block-loading-box-item'></div></div><div>─────── ${system} ───────</div></div>";
            bodyDom.insertBefore(pageLoadDom, bodyDom.childNodes[0]);
          };
          // 结束加载
          const endLoad = () => {
            // 1. 获取页面body元素
            const bodyDom = document.body;
            // 2. 获取到页面所有loading元素, 将其从body删除
            const pageLoadDomList = document.querySelectorAll(".block-loading");
            Array.from(pageLoadDomList).forEach((dom) => bodyDom.removeChild(dom));
          };
          startLoad()
          window.addEventListener("load", () => {
            let pageLoadTimer = null
            pageLoadTimer = setTimeout(() => {
              endLoad()
              clearTimeout(pageLoadTimer)
            }, 500);
          });
        `;
        return `${code}\n${script}`;
      }
    },
  };
};
